<template>
	<view class="agreement-check-container">
		<view class="header">
			<image class="logo" src="/static/logo.svg" mode="aspectFit"></image>
			<text class="title">BrainCube</text>
			<text class="subtitle">智能测试平台</text>
		</view>
		
		<view class="content">
			<view class="welcome-text">
				<text class="welcome-title">欢迎使用BrainCube</text>
				<text class="welcome-desc">为了更好地为您提供服务，请先阅读并同意我们的服务条款</text>
			</view>
			
			<view class="agreement-list">
				<view class="agreement-item" :class="{ 'agreed': privacyAgreed }">
					<view class="agreement-info">
						<text class="agreement-title">隐私政策</text>
						<text class="agreement-desc">了解我们如何收集、使用和保护您的个人信息</text>
					</view>
					<view class="agreement-action">
						<text v-if="privacyAgreed" class="status-agreed">✓ 已同意</text>
						<BrandButton 
							v-else
							text="阅读"
							type="outline"
							size="small"
							@click="readPrivacyPolicy"
						></BrandButton>
					</view>
				</view>
				
				<view class="agreement-item" :class="{ 'agreed': userAgreementAgreed }">
					<view class="agreement-info">
						<text class="agreement-title">用户协议</text>
						<text class="agreement-desc">了解使用我们服务时的权利和义务</text>
					</view>
					<view class="agreement-action">
						<text v-if="userAgreementAgreed" class="status-agreed">✓ 已同意</text>
						<BrandButton 
							v-else
							text="阅读"
							type="outline"
							size="small"
							@click="readUserAgreement"
						></BrandButton>
					</view>
				</view>
			</view>
			
			<view class="progress-info">
				<text class="progress-text">进度：{{ agreedCount }}/2</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<BrandButton 
				:text="allAgreed ? '开始使用' : '请先同意所有协议'"
				:type="allAgreed ? 'primary' : 'disabled'"
				size="large"
				:disabled="!allAgreed"
				@click="handleContinue"
			></BrandButton>
			
			<view class="quick-actions">
				<text class="quick-link" @click="readAllAgreements">一键阅读所有协议</text>
			</view>
		</view>
	</view>
</template>

<script>
import BrandButton from '@/components/BrandButton.vue'
import { 
	hasAgreedPrivacyPolicy, 
	hasAgreedUserAgreement, 
	hasAgreedAllAgreements,
	showAgreementPages
} from '@/utils/agreementManager.js'

export default {
	name: 'AgreementCheck',
	components: {
		BrandButton
	},
	data() {
		return {
			privacyAgreed: false,
			userAgreementAgreed: false
		}
	},
	computed: {
		allAgreed() {
			return this.privacyAgreed && this.userAgreementAgreed
		},
		agreedCount() {
			let count = 0
			if (this.privacyAgreed) count++
			if (this.userAgreementAgreed) count++
			return count
		},
		progressPercent() {
			return (this.agreedCount / 2) * 100
		}
	},
	onLoad() {
		this.checkAgreementStatus()
	},
	onShow() {
		// 页面显示时重新检查状态
		this.checkAgreementStatus()
	},
	methods: {
		/**
		 * 检查协议同意状态
		 */
		checkAgreementStatus() {
			this.privacyAgreed = hasAgreedPrivacyPolicy()
			this.userAgreementAgreed = hasAgreedUserAgreement()
			
			// 如果已经全部同意，自动跳转
			if (this.allAgreed) {
				setTimeout(() => {
					this.handleContinue()
				}, 1000)
			}
		},
		
		/**
		 * 阅读隐私政策
		 */
		readPrivacyPolicy() {
			uni.navigateTo({
				url: '/pages/privacy-policy/privacy-policy'
			})
		},
		
		/**
		 * 阅读用户协议
		 */
		readUserAgreement() {
			uni.navigateTo({
				url: '/pages/user-agreement/user-agreement'
			})
		},
		
		/**
		 * 一键阅读所有协议
		 */
		readAllAgreements() {
			showAgreementPages('both')
		},
		
		/**
		 * 继续使用应用
		 */
		handleContinue() {
			if (!this.allAgreed) {
				uni.showToast({
					title: '请先同意所有协议',
					icon: 'none'
				})
				return
			}
			
			uni.showToast({
				title: '欢迎使用BrainCube',
				icon: 'success'
			})
			
			// 跳转到微信登录页面
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/wechat-login/wechat-login'
				})
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>

.agreement-check-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: linear-gradient(135deg, $brand-primary-light 0%, $bg-secondary 100%);
	padding: 40rpx;
	box-sizing: border-box;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 80rpx;
	margin-bottom: 60rpx;
	
	.logo {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 24rpx rgba($brand-primary, 0.2);
	}
	
	.title {
		font-size: 40rpx;
		font-weight: 700;
		color: $brand-primary-dark;
		margin-bottom: 10rpx;
		letter-spacing: 1rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: $text-secondary;
		font-weight: 400;
	}
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	
	.welcome-text {
		text-align: center;
		margin-bottom: 60rpx;
		
		.welcome-title {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			color: $text-primary;
			margin-bottom: 16rpx;
		}
		
		.welcome-desc {
			display: block;
			font-size: 26rpx;
			color: $text-secondary;
			line-height: 1.5;
		}
	}
	
	.agreement-list {
		margin-bottom: 40rpx;
		
		.agreement-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			margin-bottom: 20rpx;
			background: white;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			border: 2rpx solid transparent;
			transition: all 0.3s ease;
			
			&.agreed {
				border-color: $success-color;
				background: rgba($success-color, 0.05);
			}
			
			.agreement-info {
				flex: 1;
				margin-right: 20rpx;
				
				.agreement-title {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					color: $text-primary;
					margin-bottom: 8rpx;
				}
				
				.agreement-desc {
					display: block;
					font-size: 24rpx;
					color: $text-secondary;
					line-height: 1.4;
				}
			}
			
			.agreement-action {
				.status-agreed {
					font-size: 26rpx;
					color: $success-color;
					font-weight: 600;
				}
			}
		}
	}
	
	.progress-info {
		padding: 30rpx;
		background: white;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		
		.progress-text {
			display: block;
			font-size: 26rpx;
			color: $text-primary;
			font-weight: 600;
			margin-bottom: 16rpx;
			text-align: center;
		}
		
		.progress-bar {
			height: 8rpx;
			background: $border-light;
			border-radius: 4rpx;
			overflow: hidden;
			
			.progress-fill {
				height: 100%;
				background: linear-gradient(90deg, $brand-primary 0%, $brand-secondary 100%);
				border-radius: 4rpx;
				transition: width 0.3s ease;
			}
		}
	}
}

.footer {
	padding-top: 40rpx;
	
	.quick-actions {
		text-align: center;
		margin-top: 30rpx;
		
		.quick-link {
			font-size: 26rpx;
			color: $brand-primary;
			text-decoration: underline;
		}
	}
}
</style>